<template>
  <div>
    <div
      class="navbanner lunbo"
      style="margin-top:0"
    >
      <img src="../../../static/images/newscenter.png" />   
    </div>
    <div
      class="navbanner clearfix"
      style="margin-top: 0;"
    >
      <div class="nav fl">
        <h2 v-if="temp.value == category"  v-for="temp in categoryList" v-text="temp.category">新闻资讯</h2>
      </div>
      <div
        class="navbanner clearfix"
        style="margin-top: 0;"
      >
        <div class="content">
          <div style="height: 420px;">
            <!-- 新闻列表 -->
            <ul class="listMain">
              <li v-for="(temp,index) in newsList" @click="toDetail(temp)">
                <a class="lf" href="javascript:void(0);">{{temp.title.substring(0,30)+"..."}}</a>
                <span class="rt">[{{ temp.createTime }}]</span>
              </li>
            </ul>
          </div>
        </div>

        <!-- 分页 -->
        <br/>
        <div>
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            :total="pageTotal"
            @current-change="pageChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from '../../utils/request'
export default {
  name: "SubjectItemList",
  data() {
    return {
      drawer: this.visiable,
      subjectItemlist: [],
      currentPage: 1,
      total: 0,
      loading: true,
      drawerSize: "30%",
        //新闻类
      newsList: [],
      //通知公告类
      noticeList:[],
      url:{
        newsList: '/sunNews/list',
        newsDetail:'/sunNews/queryById',
        category: "/sunCategory/list",
      },
      // newsDetail:{},
      categoryList:[],
      category:null,
      //分页相关
      pageNo:1,
      pageTotal:10,
      pageSize:2
    
    };
  },
  created() {
    this.category = this.$route.query.category
    //获取分类
    this.getNewsList(this.category,1)
     //获取分类列表
    this.getCategoryList()
  },
  mounted() {
    // 获取宽高
    window.onresize = () => {
      return (() => {
        this.resizeWin();
      })();
    };
    this.resizeWin();
  },
  methods: {
    //分页点击事件
    pageChange(pageNo){
      this.getNewsList(this.category,pageNo)
    },
    //跳转新闻详情页面
    toDetail(data){
      this.$router.push("./subjectInfo?id="+data.id)
    },
     //获取分类表
    getCategoryList () {
      request.get(this.url.category)
        .then((res) => {
          if (res.data.success) {
            // console.log(res.data.result)
            this.categoryList = res.data.result.records
            // console.log(this.categoryList)
          }
        }).catch((error)=>{
        console.log(error)
      })
    },
  //获取新闻
    getNewsList (category,pageNo) {
      request.get(this.url.newsList,{
        params:{
          pageNo:pageNo,
          pageSize:2,
          category:category
        }
      })
        .then((res) => {
          if (res.data.success) {
            this.newsList = res.data.result.records
            this.pageTotal =res.data.result.total
            this.pageSize = res.data.result.size
          }
        }).catch((error)=>{
        console.log(error)
      })
    },
    resizeWin() {
      //当前window 宽
      let centerWidth = document.documentElement.scrollWidth;
      if (centerWidth > 1300) {
        this.drawerSize = "30%";
      } else if (centerWidth > 1000) {
        this.drawerSize = "50%";
      } else if (centerWidth > 600) {
        this.drawerSize = "60%";
      } else {
        this.drawerSize = "95%";
      }
    },
 
  },
};
</script>

<style scoped>
.blogsbox {
  width: 100%;
  height: 900px;
  overflow-y: scroll;
}
.blogs {
  margin-bottom: 0px;
  padding: 20px;
}
.blogs .blogtext {
  margin-top: 0px;
}

</style>
